{% extends "base.html" %}
{% block content %}
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="/static/js/artDialog/jquery.artDialog.js?skin=default"></script>
<script type="text/javascript" src="/static/js/artDialog/plugins/iframeTools.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.16.custom.min.js"></script>
<link href="/static/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
{{ttt}}
{% ifequal is_con 0 %}
<table width="100%">
		<tr style="background:#dfdfdf;">
			<td align="center"><h1  style="line-height:40px;font-size:18px;color:#10D3F8">Sent Mail List</h1></td>
		</tr>
</table>
<div class="form-div">
  <form action="" method="get" name="searchForm">
    <img src="/static/images/icon_search.gif" width="26" height="22" border="0" alt="SEARCH" />
	Begin:
		<input type='text' name='begin' id='start' value='{% if begin %}{{begin}}{%endif%}'/>
	End:
		<input type='text' name='end' class="datepicker" id='end' value='{% if end %}{{end}}{%endif%}'/>
	Object:
		<input type='text' name='object' value='{% if object %}{{object}}{%endif%}'/>
	sendUser:
		<input type='text' name='senduser' value='{% if senduser %}{{senduser}}{%endif%}'/>
	SendEmail:
		<input type='text' name='sendmail' value='{% if sendmail %}{{sendmail}}{%endif%}'/>
	<input type="button" value="Search" id='search' class="g-button g-button-submit"/>
  </form>
</div>
<script>
$(function(){
	$('#start').datepicker({"dateFormat": "yy-mm-dd"})
	$('#end').datepicker({"dateFormat": "yy-mm-dd"})
	$("#search").bind({
		click:function(){
			var t = this
			if(t.style.cursor == 'wait'){
				return false;
			}
			t.style.cursor = 'wait'
			var data = $('form[name="searchForm"]').serializeArray()
			var datas = {'is_con':1}
			for(var i=0;i<data.length;i++){
				datas[data[i].name] = data[i].value
			}
			$.ajax({
				url:'',
				data:datas,
				type:'get',
				dataType:'html',
				success:function(e){
					t.style.cursor = 'pointer'
					$('#return').html(e)
				}
			})
		}
	})
});
</script>
	<style>
		.emaillist{
			float:left;
			padding:3px;
			margin:2px;
			border:1px solid #def;
		}
		.emaillist:hover{
			background:#efefef;
			cursor:pointer;
		}
	</style>
{% endifequal %}
<div id="return">
	<table width="100%" align="center" cellpadding="1" class="aui-ibox-data aui-dotted-split">
	  <thead>
		<tr>
			<th align="left" width="90">MailList</th>
			<th align="left" width="150">MailSubject</th>
			<th align="left" width="100">MailInfo</th>
			<th align="left" width="120">SendTime</th>
			<th align="left" width="80">SendUser</th>
			<th align="left" width="50">SendTotal</th>
			<th align="left" width="50">Successd</th>
			<th align="left" width="50">Fail</th>
			<th align="left" width="50">Opend</th>
			<th align="left" width="">Unsubscribe</th>
		</tr>
	  </thead>
	  <tbody>
	  {% if mails %}
		{%for m in mails %}
		<tr class="mails" gmid="{{m.id}}">
			<td align="left"><a href="#" gmid="{{m.id}}" class="look_maillist">{{m.mailgroup.group_name}}</a></td>
			<td align="left">{{m.mail_object}}</td>
			<td align="left">
				<span style="color:blue;cursor:pointer;" class="show_maillist" lid='{{m.id}}'>Particulars</span>
			</td>
			<td align="left">{{m.mail_sendtime|date:"M d,Y"}}</td>
			<td align="left">{{m.mail_senduser}}</td>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td>0</td>
			<td>0</td>
		</tr>
		{% endfor %}
	  {%else%}
	    <tr>
			<td align="center" valign="center" height="60" colspan="10" style="color:green;font-size:16px;line-height: 60px;">No Results !</td>
		</tr>
	  {%endif%}
		<tr>
			<td align="center" colspan="20">
				<div id="pages" class="pager"></div>
			</td>
		</tr>
	  </tbody>
	</table>
</div>
<script>
(function(){
	$('span.show_maillist').click(function(){
		var lid = $(this).attr('lid')
		var dialog = art.dialog({title:'Mail Particulars',lock:true})
		$.get('/smtpmailinfo/',{'mlid':lid,'look':1},function(e){
			dialog.content(e)
			dialog.button({name:'close'})
		})
	})
	$('.look_maillist').click(function(){
		var gmid = $(this).attr('gmid')
		var dialog = art.dialog({lock:true,title:'mailGroupInfo',width:'720px',padding:'5px',button:{name:'OK'}})
		$.get('/optsmaillist',{'id':gmid,'opt':'watchsendinfo','t':Math.random()},function(e){
			dialog.content(e)
		})
		return false;
	})

	function initdata(){
		/*下面为初始化统计信息*/
		$('#return').find('tr.mails').each(function(){
			var mid = $(this).attr('gmid')
			var t = this
			if(!mid){
				artDialog.alert('Please try again after to refresh the page')
				return false;
			}else{
				$.get('/getsendstate',{'mid':mid},function(e){
					var e = JSON.parse(e)
					if(e['code']==1){
						var ret = e['msg'].split(',')
						$(t).find('td').each(function(){
							if(parseInt($(this).index())>4){
								$(this).html(ret[$(this).index()-5])
							}
						})
					}
				})		
			}
		})
		/*初始化分页*/
		var tolpage = {{tolpage}}
		var page = {{page}}
		if(tolpage<=1)return false;
		$('#pages').append(tolpage+'&nbsp;pages:')
		$('#pages').show()
		var i = 1;
		if(tolpage>10){
			i=(page-5)>1?page-5:1
			tolpage = tolpage>(page + 5)?page+5:tolpage
		}
		for(i;i<=tolpage;i++){
			var c = ''
			if(i=={{page}}){
				c = 'active'
			}
			$('#pages').append("<li><a href='?is_con=1&begin={% if begin %}{{begin}}{%endif%}&end={% if end %}{{end}}{%endif%}&object={% if object %}{{object}}{%endif%}&senduser={% if senduser %}{{senduser}}{%endif%}&sendmail={% if sendmail %}{{sendmail}}{%endif%}&page="+i+"' onclick=\"$.get(this.href,function(e){$(\'#return\').html(e)});return false;\" class='"+c+"'>"+i+"</a></li>")
		}
	}
	initdata()
})()
</script>
{% endblock %}
